<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.pink-blue.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
    <table class="mdl-data-table mdl-js-data-table  mdl-shadow--2dp" style="margin:100px auto">
  <thead>
    <tr>
      <th>目的地址</th>
      
      <th>网关</th>
      <th>子网掩码</th>
        <th>跃点距离</th>
        <th>物理接口</th>
        
    </tr>
  </thead>
  <tbody>
    {% for i in table %}
        <tr>
        {%for j in i%}
            <th>{{ j }}</th>
        {% endfor %}
        </tr>
    {% endfor %}

  </tbody>
</table>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="javascript:location.href='new_table'"> 
  距离向量
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="javascript:location.href='transport'"> 
  分组转发
</button>
</body>
</html>